<template>
  <div class="card" @click="select">
    <div class="card-one">
      <el-avatar shape="square" :size="60" :src="userXx.avatar"></el-avatar>
    </div>
    <div class="card-two">
      <div class="card-two-one">
        <div style="width:60%;overflow:hidden">
          <p v-if="type!=='roomlist'">{{ userXx.nicheng }}</p>
          <p v-if="type==='roomlist'||type==='room'">{{ userXx.roomnames }}</p>
        </div>
        <div v-if="type===`onetoone`||type===`room`" style="width:40%;overflow:hidden;font-size: 10px;">
          <p><span>时间:</span>{{ this.lastmessageXx.messagetime }}</p>
        </div>
        <div v-if="type===`friendList`" style="width:40%;overflow:hidden;font-size: 10px;">
          <p><span>备注:</span>备注{{ }}</p>
        </div>
      </div>
      <div v-if="type===`onetoone`||type===`room`" class="card-two-two">
        <div style="width:90%;overflow:hidden">
          <p>
            <span>最近消息:</span>{{ this.lastmessageXx.message }}
          </p>
        </div>
        <div style="overflow:hidden;width: 10%;">
          <p class="pv"><el-badge :value="this.lastmessageXx.type" class="item">
            </el-badge></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    id: {
      type: String, Number,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    roomXx:{
      type: Object,
      default: ()=>{}
    }
  },
  computed: {
    ...mapGetters(['one_onefriendlastmessageXx', 'userXxget','rooXxget','LastRoomMessage']),
    lastmessageXx() {
      if (this.type === 'onetoone') {
        return this.one_onefriendlastmessageXx(this.id)
      } else if (this.type === 'room') {
        return this.LastRoomMessage(this.id)
      } else {
        return {}
      }
    },
    userXx() {
      if (this.type === 'onetoone') {
        return this.userXxget(this.id)
      } else if (this.type === 'roomlist') {
        return this.roomXx
      }else if(this.type==='friendList'){
        return this.userXxget(this.id)
      } else if(this.type==='room'){
        return this.rooXxget(this.id)
      }else{
        return {}
      }
    }
  },
  mounted() {
    // console.log(this.lastmessageXx);
  },
  methods: {
    select() {
      this.$emit('lick', this.id)
    }
  },
}
</script>

<style >
body {
  margin: 0;
}

.card {
  height: 80px;
  width: 100%;
  margin-top: 5px;
  /* border: 1px solid red; */
  display: flex;

}

.card:hover {
  background-color: #F2F6FC;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.card-one {
  margin-top: 8px;
  margin-left: 10px;
}

.card-two {
  margin-left: 1%;
  width: 85%;
  /* border: 1px solid red; */
}

.card-two-one {
  height: 40px;
  width: 100%;
  display: flex;
  /* border: 1px solid red; */
}

.card-two-two {
  display: flex;
  height: 40px;
  /* border: 1px solid red; */
}

.pv {
  /* background-color: aqua; */
  border-radius: 5px;
}


</style>